<template>
	<view class="page">
		<!-- 问题 -->
		<view class="cont">
			<check-xi @nextAnswer="nextAnswer" @checkOption="checkOption" :questionList="questionList" :colorStyle="colorStyle" :type="type"></check-xi>
		</view>
	</view>
</template>

<script>
	import checkXi from '@/components/xi-check/xi-check.vue';
	export default {
		components: {
			checkXi
		},
		data() {
			return {
				type:'',//答题类别
				colorStyle: { // 颜色修改自定义 -- 若需修改必须全部都要有！！！
					nextBac: '#C9784F', //下一题按钮背景色
					nextCol: '#FFFFFF', //下一题按钮背字体颜色
					optBac: '#FFFFFF', //选项按钮背景色
					optCol: '#232131', //选项按钮字体颜色
					optBacActive: '#E5422D', //选项按钮背景色 - 选中
					optColActive: '#FFFFFF', //选项按钮字体颜色-选中
				},
				questionList: [{
					id: 1, //题目id
					type: 'radio', //单选 checkbox - 多选 ； write - 填空 
					number: 1, //题目序号 - 非必要
					title: '生物灭绝又叫生物绝种。历史上一共有几次大灭绝？', //题目名称
					imageList: [], //图片地址
					question_option: [{
							id: 1, //答案id
							name: 'A', //答案选项名
							content: '一次', //答案内容
							active: 0 //选中状态
						},
						{
							id: 2,
							name: 'B',
							content: '二次',
							active: 0
						},
						{
							id: 3,
							name: 'C',
							content: '三次',
							active: 0
						},
						{
							id: 4,
							name: 'D',
							content: '四次',
							active: 0
						},
					] //选项集
				}, {
					id: 2,
					type: 'checkbox',
					number: 2,
					title: '生物大灭绝是指大规模的集群灭绝，生物灭绝又叫生物绝种。历史上一共有几次大灭绝？',
					imageList: [],
					question_option: [{
							id: 1,
							name: 'A',
							content: '一次',
							active: 0
						},
						{
							id: 2,
							name: 'B',
							content: '二次',
							active: 0
						},
						{
							id: 3,
							name: 'C',
							content: '三次',
							active: 0
						},
						{
							id: 4,
							name: 'D',
							content: '四次',
							active: 0
						},
					]
				}, {
					id: 3,
					type: 'write',
					number: 3,
					title: '生物大灭绝是指大规模的集群灭绝，生物灭绝又叫生物绝种。历史上一共有_____次大灭绝？',
					imageList: [],
					question_key: '' //绑定的答案输入字段
				}]
			}
		},
		onLoad(e) {
			console.log('type',e.type)
			let that = this;
			that.type = e.type;
		},
		methods: {
			/**
			 * 绑定选择答案事件
			 */
			nextAnswer(e) {
				console.log('next', e);
			},
			checkOption(e) {
				console.log('check', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'cepingxuankedati.scss';
</style>
